<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>happy birthday!</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style>
    body {
        background-image: url('d.png');
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        background-size: cover;
        margin: 0;
        padding: 0;
    }
    #backToHome {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        padding: 10px 20px;
        font-size: 1.5em;
        color: white;
        background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
        background-size: 400% 400%;
        animation: gradientBG 15s ease infinite;
        border: none;
        border-radius: 50px;
        opacity: 0.8;
        cursor: pointer;
        transition: color 0.3s;
        z-index: 10;
    }
    #backToHome:hover {
        color: black;
    }
    @keyframes gradientBG {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
</style>
</head>
<body>
  <audio autoplay loop preload="auto" src="MP3/XC2song.m4a">
  </audio>
<div id="msg_slideshow" class="msg_slideshow" style="margin:0 auto">
    <div id="msg_wrapper" class="msg_wrapper">
     </div>
    <div id="msg_controls" class="msg_controls">
        <a href="#" id="msg_grid" class="msg_grid"></a>
        <a href="#" id="msg_prev" class="msg_prev"></a>
        <a href="#" id="msg_pause_play" class="msg_pause"></a>
        <a href="#" id="msg_next" class="msg_next"></a>
    </div>
    <div id="msg_thumbs" class="msg_thumbs">
        <div class="msg_thumb_wrapper">
            <a href="#"><img src="picture/favofite/1.jpg" alt="picture/favofite/1.jpg"/></a>
            <a href="#"><img src="picture/favofite/2.jpg" alt="picture/favofite/2.jpg"/></a>
            <a href="#"><img src="picture/favofite/3.jpg" alt="picture/favofite/3.jpg"/></a>
            <a href="#"><img src="picture/favofite/4.jpg" alt="picture/favofite/4.jpg"/></a>
            <a href="#"><img src="picture/favofite/5.jpg" alt="picture/favofite/5.jpg"/></a>
            <a href="#"><img src="picture/favofite/6.jpg" alt="picture/favofite/6.jpg"/></a>
            <a href="#"><img src="picture/favofite/7.jpg" alt="picture/favofite/7.jpg"/></a>
            <a href="#"><img src="picture/favofite/8.jpg" alt="picture/favofite/8.jpg"/></a>
            <a href="#"><img src="picture/favofite/9.jpg" alt="picture/favofite/9.jpg"/></a>
            <a href="#"><img src="picture/favofite/10.jpg" alt="picture/favofite/10.jpg"/></a>
            <a href="#"><img src="picture/favofite/11.jpg" alt="picture/favofite/11.jpg"/></a>
            <a href="#"><img src="picture/favofite/12.jpg" alt="picture/favofite/12.jpg"/></a>
            <a href="#"><img src="picture/favofite/13.jpg" alt="picture/favofite/13.jpg"/></a>
            <a href="#"><img src="picture/favofite/14.jpg" alt="picture/favofite/14.jpg"/></a>
            <a href="#"><img src="picture/favofite/15.jpg" alt="picture/favofite/15.jpg"/></a>
            <a href="#"><img src="picture/favofite/16.jpg" alt="picture/favofite/16.jpg"/></a>
            <a href="#"><img src="picture/favofite/17.jpg" alt="picture/favofite/17.jpg"/></a>
            <a href="#"><img src="picture/favofite/18.jpg" alt="picture/favofite/18.jpg"/></a>
            <a href="#"><img src="picture/favofite/19.jpg" alt="picture/favofite/19.jpg"/></a>
            <a href="#"><img src="picture/favofite/20.jpg" alt="picture/favofite/20.jpg"/></a>
            <a href="#"><img src="picture/favofite/21.jpg" alt="picture/favofite/21.jpg"/></a>
            <a href="#"><img src="picture/favofite/22.jpg" alt="picture/favofite/22.jpg"/></a>
            <a href="#"><img src="picture/favofite/23.jpg" alt="picture/favofite/23.jpg"/></a>
            <a href="#"><img src="picture/favofite/24.jpg" alt="picture/favofite/24.jpg"/></a>
            <a href="#"><img src="picture/favofite/25.jpg" alt="picture/favofite/25.jpg"/></a>
            <a href="#"><img src="picture/favofite/26.jpg" alt="picture/favofite/26.jpg"/></a>
            <a href="#"><img src="picture/favofite/27.jpg" alt="picture/favofite/27.jpg"/></a>
            <a href="#"><img src="picture/favofite/28.jpg" alt="picture/favofite/28.jpg"/></a>
            <a href="#"><img src="picture/favofite/29.jpg" alt="picture/favofite/29.jpg"/></a>
            <a href="#"><img src="picture/favofite/30.jpg" alt="picture/favofite/30.jpg"/></a>
            <a href="#"><img src="picture/favofite/31.jpg" alt="picture/favofite/31.jpg"/></a>
        </div>
        <a href="#" id="msg_thumb_next" class="msg_thumb_next"></a>
        <a href="#" id="msg_thumb_prev" class="msg_thumb_prev"></a>
        <a href="#" id="msg_thumb_close" class="msg_thumb_close"></a>
        <span class="msg_loading"></span>
    </div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        var interval = 4000;
        var playtime;
        var current = 0;
        var current_thumb = 0;
        var nmb_thumb_wrappers = $('#msg_thumbs .msg_thumb_wrapper').length;
        var nmb_images_wrapper = 6;

        play();

        slideshowMouseEvent();
        function slideshowMouseEvent(){
            $('#msg_slideshow').unbind('mouseenter')
                               .bind('mouseenter',showControls)
                               .andSelf()
                               .unbind('mouseleave')
                               .bind('mouseleave',hideControls);
        }

        $('#msg_grid').bind('click',function(e){
            hideControls();
            $('#msg_slideshow').unbind('mouseenter').unbind('mouseleave');
            pause();
            $('#msg_thumbs').stop().animate({'top':'0px'},500);
            e.preventDefault();
        });

        $('#msg_thumb_close').bind('click',function(e){
            showControls();
            slideshowMouseEvent();
            $('#msg_thumbs').stop().animate({'top':'-230px'},500);
            e.preventDefault();
        });

        $('#msg_pause_play').bind('click',function(e){
            var $this = $(this);
            if($this.hasClass('msg_play'))
                play();
            else
                pause();
            e.preventDefault();	
        });

        $('#msg_next').bind('click',function(e){
            pause();
            next();
            e.preventDefault();
        });
        $('#msg_prev').bind('click',function(e){
            pause();
            prev();
            e.preventDefault();
        });

        function showControls(){
            $('#msg_controls').stop().animate({'right':'15px'},500);
        }
        function hideControls(){
            $('#msg_controls').stop().animate({'right':'-110px'},500);
        }

        function play(){
            next();
            $('#msg_pause_play').addClass('msg_pause').removeClass('msg_play');
            playtime = setInterval(next,interval)
        }

        function pause(){
            $('#msg_pause_play').addClass('msg_play').removeClass('msg_pause');
            clearTimeout(playtime);
        }

        function next(){
            ++current;
            showImage('r');
        }

        function prev(){
            --current;
            showImage('l');
        }

        function showImage(dir){
            alternateThumbs();
            var $thumb = $('#msg_thumbs .msg_thumb_wrapper:nth-child('+current_thumb+')')
                        .find('a:nth-child('+ parseInt(current - nmb_images_wrapper*(current_thumb -1)) +')')
                        .find('img');
            if($thumb.length){
                var source = $thumb.attr('alt');
                var $currentImage = $('#msg_wrapper').find('img');
                if($currentImage.length){
                    $currentImage.fadeOut(function(){
                        $(this).remove();
                        $('<img />').load(function(){
                            var $image = $(this);
                            resize($image);
                            $image.hide();
                            $('#msg_wrapper').empty().append($image.fadeIn());
                        }).attr('src',source);
                    });
                }
                else{
                    $('<img />').load(function(){
                        var $image = $(this);
                        resize($image);
                        $image.hide();
                        $('#msg_wrapper').empty().append($image.fadeIn());
                    }).attr('src',source);
                }
            }
            else{
                if(dir == 'r')
                    --current;
                else if(dir == 'l')
                    ++current;	
                alternateThumbs();
                return;
            }
        }

        function alternateThumbs(){
            $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
                            .hide();
            current_thumb = Math.ceil(current/nmb_images_wrapper);
            if(current_thumb > nmb_thumb_wrappers){
                current_thumb 	= 1;
                current 		= 1;
            }	
            else if(current_thumb == 0){
                current_thumb 	= nmb_thumb_wrappers;
                current 		= current_thumb*nmb_images_wrapper;
            }
            $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
                            .show();	
        }

        $('#msg_thumb_next').bind('click',function(e){
            next_thumb();
            e.preventDefault();
        });
        $('#msg_thumb_prev').bind('click',function(e){
            prev_thumb();
            e.preventDefault();
        });
        function next_thumb(){
            var $next_wrapper = $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+parseInt(current_thumb+1)+')');
            if($next_wrapper.length){
                $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
                                .fadeOut(function(){
                                    ++current_thumb;
                                    $next_wrapper.fadeIn();									
                                });
            }
        }
        function prev_thumb(){
            var $prev_wrapper = $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+parseInt(current_thumb-1)+')');
            if($prev_wrapper.length){
                $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
                                .fadeOut(function(){
                                    --current_thumb;
                                    $prev_wrapper.fadeIn();									
                                });
            }				
        }

        $('#msg_thumbs .msg_thumb_wrapper > a').bind('click',function(e){
            var $this = $(this);
            $('#msg_thumb_close').trigger('click');
            var idx = $this.index();
            var p_idx = $this.parent().index();
            current = parseInt(p_idx*nmb_images_wrapper + idx + 1);
            showImage();
            e.preventDefault();
        }).bind('mouseenter',function(){
            var $this = $(this);
            $this.stop().animate({'opacity':1});
        }).bind('mouseleave',function(){
            var $this = $(this);	
            $this.stop().animate({'opacity':0.5});
        });

        function resize($image){
            var theImage = new Image();
            theImage.src = $image.attr("src");
            var imgwidth = theImage.width;
            var imgheight = theImage.height;
            var containerwidth = 400;
            var containerheight = 400;
            if(imgwidth > containerwidth){
                var newwidth = containerwidth;
                var ratio = imgwidth / containerwidth;
                var newheight = imgheight / ratio;
                if(newheight > containerheight){
                    var newnewheight = containerheight;
                    var newratio = newheight/containerheight;
                    var newnewwidth = newwidth/newratio;
                    theImage.width = newnewwidth;
                    theImage.height= newnewheight;
                }
                else{
                    theImage.width = newwidth;
                    theImage.height= newheight;
                }
            }
            else if(imgheight > containerheight){
                var newheight = containerheight;
                var ratio = imgheight / containerheight;
                var newwidth = imgwidth / ratio;
                if(newwidth > containerwidth){
                    var newnewwidth = containerwidth;
                    var newratio = newwidth/containerwidth;
                    var newnewheight = newheight/newratio;
                    theImage.height = newnewheight;
                    theImage.width= newnewwidth;
                }
                else{
                    theImage.width = newwidth;
                    theImage.height= newheight;
                }
            }
            $image.css({
                'width': theImage.width,
                'height': theImage.height
            });
        }
    });
</script>
<!-- 代码 结束 -->

<div style="text-align:center;clear:both;margin-top:20px">
</div>

<div id="backToHome" style="position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); padding: 10px 20px; background-color: #333; color: #fff; border: none; cursor: pointer;">回到主页</div>

<script>
    document.getElementById('backToHome').addEventListener('click', function() {
        window.location.href = 'index.html';
    });

    document.getElementById('backToHome').addEventListener('touchstart', function(event) {
        event.preventDefault();
        window.location.href = 'index.html';
    });
</script>

</body>
</html>
